<template>
          <div>

        <myheader></myheader>

      <br><br>
      <!--面包屑导航-->
      <Breadcrumb :datas="datas"></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">

      <!--智能提示-->
      <div v-width="300"><AutoComplete :option="param" v-model="value" @change="onChange" type="title"></AutoComplete></div>
      <br>

      <table>
        <tr v-for="(i, index) in goodslist">
          <td>{{index + 1}}</td>

          <!--target="_blank" 新开页面-->
          <td><a target="_blank" :href=" '/item?id='+i.id ">{{i.name}}</a></td>
        </tr>
      </table>




		</div>
	</section>





	<myempennage></myempennage>

  </div>
</template>

<script>
  //导入头部包
  import myheader from './myheader'
  import myempennage from './myempennage'

  // 智能提示
  import jsonp from 'fetch-jsonp';
  const loadData = function (filter, callback) {
    // this 为 option 配置
    // this.orgId 使用传递的参数获取数据，例：搜索某公司下的员工
    jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${filter}`)
      .then(response => response.json())
      .then((d) => {
        callback(d.result.map((r) => {
          return r[0];
        }));
      });
    };


    export default {
        name: "search",
      data () {
          return {
            //声明面包屑变量
            datas:[{title:'首页', route:{name:'index'}}, {title:'商品检索'}],
            word:'',
            goodslist:[],

            // 智能提示控件
            value: '',
            param: {
              orgId: 1, // 自定义参数传递
              loadData,
              minWord: 1
            }

          }
        },

      // 注册组件标签
      components:{
        'myheader': myheader,
        'myempennage': myempennage
      },

        mounted:function(){
          // 接收参数
          var word = this.$route.query.word;

          this.word = word;

          console.log(this.word);

          this.get_goods()


      },
      // 监听属性
      watch:{
          $route(to, from){
            // 刷新页面
            this.$router.go(0);  // 刷新本页面
          }
      },

        methods:{

          // 智能关键词变更
          onChange(data, trigger) {
            log(data, trigger);
          },

          get_goods(){
            // 非空验证
            if(this.word != ''){
              // 发送请求
              this.axios.get(
                'http://127.0.0.1:8000/goodssearch/',
                {params:{word: this.word}}
                ).then(res=>{
                  console.log(res)
                  // 赋值操作
                  this.goodslist = res.data;

                  if(this.goodslist.length == 0){
                    this.$Message('对不起，没有搜索到商品');
                  }
              })
            }


          }



        }


    }
</script>

<style scoped>

</style>
